<%inherit file="/autohandler"/> 

<!-- begin left content -->
<div id="leftContent">

## Title of item and script to change name
##<h3 id="edititemname">${c.itemname}</h3>
##<script type="text/javascript">
## new Ajax.InPlaceEditor('edititemname', '/item/edititemname', { callback: function(form, value) { return 'itemid=${c.itemid}&myparam=' + escape(value) }});
##</script>
<h3>${c.itemname}</h3>
## Or delete it...
##${ h.form(h.url_for(action='deleteitem'), multipart=True) }
##${ h.submit('Delete') } 
##${ h.hidden('itemid', value=c.itemid) }
##${ h.end_form() } 
 
<div id="video">
%     if c.sourcedict['has_video'] == "Yes":
<video src='${c.sourcedict['urlpath']}${c.sourcedict['clipdetail']}' controls='controls' ontimeupdate="Updatetime()" width=320 height=240></video>
%     endif

%     if c.sourcedict['has_video'] == "No":
<audio src='${c.sourcedict['urlpath']}${c.sourcedict['clipdetail']}' controls='controls' ontimeupdate="Updatetime()"></audio>
%     endif
</div>


<div class="sourceinfo">
<table style="font-size:small">
	<tr>
		<td>Duration: </td><td>${c.sourcedict['duration']}</td>
	</tr>
	<tr>
		<td>Bitrate: </td><td>${c.sourcedict['bitrate']}</td>
	</tr>
	<tr>
		<td>Resolution: </td><td>${c.sourcedict['resolution']}</td>
	</tr>
	<tr>
		<td>Framerate: </td><td>${c.sourcedict['framerate']}</td>
	</tr>
	<tr>
		<td>Audio: </td><td>${c.sourcedict['audio']}</td>
	</tr>
	<tr>
		<td>Has video: </td><td>${c.sourcedict['has_video']}</td>
	</tr>
	<tr>
		<td>Has audio: </td><td>${c.sourcedict['has_audio']}</td>
	</tr>
</table>
</div>
<div style="clear: both;"></div>


<form name="api">
	<table>
		<tr>
			<td>Time:</td>
			<td><input name="tfield" size="6" /></td>
			<td>Go to:</td>
			<td><input name="gfield" size="6" onchange='Gototime("${c.sourcedict['urlpath']}?t=")' /></td>
		</tr>
		##Output area useful for debugging:
		##<tr>
		##	<td>Output:</td>
		##	<td><textarea name="ofield" cols="40" rows="2"></textarea></td>
		##</tr>
	</table>
</form>


##Header info - should really only be editable by priveleged users
##<hr />
##Head:
##${ h.form(h.url_for(controller='item', action='editheadinfo'), multipart=True) }
##id:
##{ h.text('headid', value=c.headdict['id']) }
##Title:
##${ h.text('headtitle', value=c.headdict['title']) }
##${ h.hidden('itemid', value=c.itemid) }
##
##${ h.submit('Edit') } 
##${ h.end_form() } 
##<br />
##<hr />


<h4>Meta information:</h4>
<table>
	<tr>
		<td>Name</td>
		<td>Content</td>
	</tr>
<% i = 0 %>
% for metainfo in c.metalist:
	<tr>
		<td><span id="editmetaname${i}">${metainfo['name']}</span>
		<script type="text/javascript">
		 new Ajax.InPlaceEditor('editmetaname${i}', '/item/editheadmetaname', { callback: function(form, value) { return 'id=${metainfo['id']}&field=name&itemid=${c.itemid}&myparam=' + escape(value) }});
		</script>
		</td>
		<td>
		<span id="editmetacontent${i}">${metainfo['content']}</span>
		<script type="text/javascript">
		 new Ajax.InPlaceEditor('editmetacontent${i}', '/item/editheadmetaname', { callback: function(form, value) { return 'id=${metainfo['id']}&field=content&itemid=${c.itemid}&myparam=' + escape(value) }});
		</script>
		</td>
		<td>
		##${ h.form(h.url_for(action='deletemeta'), multipart=True) }
		##${ h.submit('Delete') }
		##${ h.hidden('metaid', value=metainfo['index']) }
		##${ h.hidden('itemid', value=c.itemid) }
		##${ h.hidden('headid', value=c.headdict['index']) }
		##${ h.end_form() } 
		</td>
	</tr> 
<% i = i + 1 %>
% endfor
</table>

<hr />


<h4>Add new meta tag:</h4>
${ h.form(h.url(controller='item', action='addmetainfo'), multipart=True) }
<table>
	<tr>
		<td>ID</td>
		<td>Name</td>
		<td>Content</td>
	</tr>
	<tr>
		<td>${ h.text('metaid', size=5) }</td>
		<td>${ h.text('metaname') }</td>
		<td>${ h.text('metacontent') }</td>
	</tr>
</table>

${ h.hidden('metascheme') }
${ h.hidden('headindex', value = c.headdict['index']) }
${ h.hidden('itemid', value=c.itemid) }

${ h.submit('add', 'Add') } 
${ h.end_form() } 

<hr />
</div>
<!-- end left content -->


<!-- begin right content -->
<div id="clipContent">
<h5>Clips</h5>
<div id="clipBox">
<table>
	<tr>
		<td></td>
		<td>Time</td>
		<td></td>
		<td></td> 
	</tr>
	
	% for clipinfo in c.cliplist:
	<tr>
	%  if c.sourcedict['has_video'] == "Yes":
	%    if clipinfo['end_time'] == 0:
		<td><a onclick='ClipPlay("${c.sourcedict['urlpath']}?t=${clipinfo['id']}",${clipinfo['id']})'><img src="${c.sourcedict['clipimageurl']}${clipinfo['img_src']}"></a></td>
	%   else:
		<td><a onclick='ClipPlay("${c.sourcedict['urlpath']}?t=${clipinfo['id']}/${clipinfo['end_time']}"),${clipinfo['id']}'><img src="${c.sourcedict['clipimageurl']}${clipinfo['img_src']}"></a></td>
	%     endif
	%  endif
	
	%  if c.sourcedict['has_video'] == "No":
	%    if clipinfo['end_time'] == 0:
		<td><a onclick='ClipPlay("${c.sourcedict['urlpath']}?t=${clipinfo['id']}",${clipinfo['id']})'><img src="/images/blank.png"></a></td>
	%   else:
		<td><a onclick='ClipPlay("${c.sourcedict['urlpath']}?t=${clipinfo['id']}/${clipinfo['end_time']}",${clipinfo['id']})'><img src="/images/blank.png"></a></td>
	%     endif
	%  endif
	
		<td>${clipinfo['start_time']}</td>
		<td>${clipinfo['desc']}</td>
		<td>${clipinfo['a_href']}</td>
	
	##${ h.form(h.url_for(action='deleteclip'), multipart=True) }
	##<td>${ h.submit('Delete') }</td>
	##${ h.hidden('clipid', value=clipinfo['ixc']) }
	##${ h.hidden('itemid', value=c.itemid) }
	##${ h.end_form() } 
	
	</tr> 
	% endfor
</table>
</div>
</div>


<div id="rightContent">
<h5>Add new clip:</h5>
<!--${ h.form(h.url(controller='item', action='addclip'), multipart=True) }-->
<form name="addaclip" action="addclip" >
<table style="font-size:small">
	<tr>
		<td>Start</td>
		<td>${ h.text('starttime', size=5) }</td>
	</tr>
	<tr>
		<td>End</td>
		<td>${ h.text('endtime', size=5) }</td>
	</tr>
	<tr>
		<td>Desc</td>
		<td><input type="text" name="desc" size="20" onfocus="disableShortcuts()" onblur="enableShortcuts()" id="desc" /><!--${ h.text('desc') }--></td>
	</tr>
	<tr>
		<td>a_text</td>
		<td>${ h.text('a_text') }</td>
	</tr>
	<tr>
		<td>a_href</td>
		<td>${ h.text('a_href') }</td>
	</tr>
</table>
${ h.hidden('headindex', value = c.headdict['index']) }
${ h.hidden('itemid', value=c.itemid) }
${ h.hidden('hasvideo', value=c.sourcedict['has_video']) }
${ h.submit('add', 'Add') } 
${ h.end_form() } 


<script>
var output = document.api.ofield;
var toutput = document.api.tfield;
var gototime = document.api.gfield;
var myVideo = document.getElementsByTagName('video')[0];
var myAudio = document.getElementsByTagName('audio')[0];

var startpointinstream = 0;

if (myAudio) {
//  addOutput("Audio");
  myMedia = myAudio;
}
else {
//  addOutput("Video");
  myMedia = myVideo;
}

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);

function ClipPlay(location,pointinstream) {
  myMedia.src = location
  myMedia.load();
  myMedia.play();
  startpointinstream = pointinstream;
  //addOutput("Audio clip");
}

function Updatetime() {
  addToutput(myMedia.currentTime + startpointinstream);
}

function addToutput(str) {
  toutput.value = str;
}

function Gototime(location) {
  t = getGoto();
//  addOutput(location + t);
  myMedia.src = location + t;
  myMedia.load();
  myMedia.play();
  startpointinstream = t;
}

function getGoto() {
  i = parseInt(gototime.value);
  return isNaN(i) ? 0 : i;
}

var outLines = 0;

function addOutput(str) {
  if (outLines == 0) {
    output.value = str;
  } else {
    output.value = str + "\n" + output.value;
  }
  outLines++;
  if (outLines == 11) {
    i = output.value.lastIndexOf("\n");
    output.value = output.value.substr(0, i);
    outLines--;
  }

}
</script>

</div>
<!-- end right content -->
